<template>
  <s-layout title="用户信息" class="set-userinfo-wrap">
    <!-- 头像选择 -->
    <view class="avatar-box">
      <span>头像:</span>
      <view>
        <button
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
          class="avatar-button"
          v-if="state.model.avatarUrl == ''"
        >
          选择头像
        </button>
        <image v-else :src="state.model.avatarUrl" class="avatar" />
      </view>
    </view>
    <!-- 昵称填写 -->
    <view class="nickname-box">
      <span>昵称:</span>
      <input
        type="nickname"
        placeholder="请输入昵称"
        v-model="state.model.nickname"
        @blur="onNicknameBlur"
        class="nickname-input"
      />
    </view>

    <su-fixed bottom placeholder bg="none">
      <view class="footer-box ss-p-20">
        <button
          class="ss-rest-button logout-btn ui-Shadow-Main"
          @tap="onSubmit"
        >
          保存
        </button>
      </view>
    </su-fixed>
  </s-layout>
</template>

<script setup>
import { computed, ref, reactive, onBeforeMount, unref } from "vue";
import { mobile, password, username } from "@/sheep/validate/form";
import sheep from "@/sheep";
import { clone } from "lodash";
import { showAuthModal } from "@/sheep/hooks/useModal";

const state = reactive({
  model: {
    avatarUrl: "", // 初始化头像 URL
    nickname: "", // 初始化昵称
  },
  rules: {},
  thirdOauthInfo: null,
});

const userInfo = computed(() => sheep.$store("user").userInfo);

// 修改用户名
const onChangeUsername = () => {
  !state.model.verification?.username && showAuthModal("changeUsername");
};

// 修改头像
function onChangeAvatar() {
  // 可以在这里处理头像修改逻辑
}

// 头像选择事件处理
function onChooseAvatar(e) {
  console.log("头像选择成功", e.detail);
  state.model.avatarUrl = e.detail.avatarUrl; // 更新头像 URL
}

// 昵称填写事件处理
function onNicknameBlur(e) {
  console.log("昵称填写成功", e.detail);
  state.model.nickname = e.detail.value; // 更新昵称
}

// 提交表单
function onSubmit() {
  console.log("提交表单", state.model);
  // 可以在这里调用更新用户信息的接口
}
</script>

<style>
.avatar-box {
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.avatar-button {
  width: 500rpx;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}
.nickname-box {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.nickname-input {
  width: 500rpx;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>
